<script setup>
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const form = ref({})
const types = ref([])
const departmentType = ref([])
const router = useRouter()

const formRef = ref()

// 表单验证规则
const rules = {
  userName: [
    { required: true, message: '请输入用户账号', trigger: 'blur' },
    { min: 2, max: 20, message: '用户账号长度在 2 到 20 个字符', trigger: 'blur' },
  ],
  nickName: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '用户昵称长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
    /*{ pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]+$/, message: '密码必须包含字母和数字', trigger: 'blur' }*/
  ],
  phonenumber: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  userType: [
    { required: true, message: '请选择账号类型', trigger: 'change' }
  ],
  userAge: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入年龄'));
        } else if (!/^\d+$/.test(value)) {
          callback(new Error('年龄必须为数字'));
        } else if (value < 1 || value > 120) {
          callback(new Error('年龄必须在1-120岁之间'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  sex: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  departmentTypeId: [
    {
      required: true,
      message: '请选择医生科属',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (form.value.userType === 102 && !value) {
          callback(new Error('医生必须选择科属'))
        } else {
          callback()
        }
      }
    }
  ]
}

const initType = () => {
  request.get('/sysRole/getSysRoleByType').then(resp => {
    types.value = resp
  }).catch(error => {
    console.error("获取角色类型失败:", error)
    ElMessage.error("获取角色类型失败")
  })
}

const initDepartmentType = () => {
  request.get(`/docDepartment/getDepartmentByType`).then(resp => {
    departmentType.value = resp
  }).catch(error => {
    console.error("获取科室类型失败:", error)
  })
}

const onSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid){
      request.post(`/user/addUser`,form.value).then(resp => {
        console.log("resp===========================",resp)
        ElMessage.success(resp.msg)
        router.push("/login")
      })
    }else {
      ElMessage.warning("请检查表单信息")
      return false
    }
  })
}

const onReset = () => {
  if (formRef.value){
    formRef.value.clearValidate()
  }
  form.value = {}
}

onMounted(() => {
  initType();
  initDepartmentType();
})
</script>

<template>
  <div class="register">
    <div class="register-form">
      <h3 class="title">用户注册</h3>
      <el-form ref="formRef"
               :model="form"
               :rules="rules" label-width="auto" style="max-width: 600px">
        <el-form-item label="用户账号" prop="userName">
          <el-input v-model="form.userName" class="form-input" />
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickName">
          <el-input v-model="form.nickName" class="form-input" />
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input v-model="form.password" type="password" class="form-input" />
        </el-form-item>
        <el-form-item label="手机号" prop="phonenumber">
          <el-input v-model="form.phonenumber" class="form-input" />
        </el-form-item>
        <el-form-item label="年龄" prop="userAge">
          <el-input v-model="form.userAge" class="form-input" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex" class="form-input">
            <el-radio :label="'0'">男</el-radio>
            <el-radio :label="'1'">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="账号类型" prop="userType">
          <el-select v-model="form.userType" placeholder="请选择账号类型" class="form-input">
            <el-option 
              v-for="type in types" 
              :key="type.roleId" 
              :label="type.roleName" 
              :value="type.roleId"
            />
          </el-select>
        </el-form-item>
        <!--  医生科属只有在账号类型为医生的时候显示  -->
        <el-form-item label="医生科属" prop="departmentTypeId" v-if="form.userType === 102">
          <el-select v-model="form.departmentTypeId" placeholder="请选择科属" class="form-input">
            <el-option v-for="department in departmentType" :key="department.departmentTypeId" :label="department.departmentName" :value="department.departmentTypeId" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" class="register-btn">注册</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="el-register-footer">
      <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.register {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
  background-position: center;
  padding: 20px;
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
  font-size: 24px;
  font-weight: 600;
}

.register-form {
  border-radius: 8px;
  background: #ffffff;
  width: 450px;
  padding: 35px 35px 25px 35px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);

  .el-form-item {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

// 统一所有输入元素的高度和样式
:deep(.form-input) {
  height: 45px;
  width: 100%;

  .el-input__wrapper {
    height: 45px;
    border-radius: 6px;
  }

  .el-input__inner {
    height: 45px;
    line-height: 45px;
  }

  &.el-select {
    .el-input__wrapper {
      height: 45px;
    }

    .el-input__inner {
      height: 45px;
      line-height: 45px;
    }
  }
}

.register-btn {
  height: 45px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
  background: linear-gradient(135deg, #409EFF 0%, #36a3f7 100%);
  border: none;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(64, 158, 255, 0.3);
  }

  &:active {
    transform: translateY(0);
  }
}

.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .register-form {
    width: 100%;
    max-width: 400px;
    padding: 25px 25px 20px 25px;
  }

  .title {
    font-size: 20px;
    margin-bottom: 25px;
  }

  .register {
    padding: 15px;
  }
}

:deep(.el-form-item.is-error .el-input__inner) {
  border-color: #F56C6C;
  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
}

:deep(.el-form-item.is-success .el-input__inner) {
  border-color: #67C23A;
  box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.2);
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #409EFF;
  border-color: #409EFF;
}

:deep(.el-checkbox__inner:hover) {
  border-color: #409EFF;
}

:deep(.el-link--primary) {
  color: #409EFF;

  &:hover {
    color: #66b1ff;
  }
}
</style>